<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    body{
        padding: 0;
        margin: 0;
    }
    ul{
        width: 240px;
        padding: 0;
        margin: 0;
        margin: 0 auto;
    }
    li{
        padding: 0;
        margin: 0;
        width: 80px;
        height: 40px;
        list-style: none;
        float: left;
        overflow: hidden;

    }
    li a{
        display: inline-block;
        width: 80px;
        height: 40px;
        text-align: center;
        font: 16px/40px "microsoft yahei";
        text-decoration: none;
        background-color: yellowgreen;
        color: #f4f4f4;
    }
    li a:hover{
        color: yellowgreen;
        background-color: lightblue;
    }
    div{
        width: 80px;
        height: 80px;
        background-color: red;
    }
    .clearfix:before,.clearfix:after{
        display: table;
        content: "";
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
</style>
<body>
<ul class="clearfix">
    <li>
        <a href="#">首页</a>
        <div></div>
    </li>
    <li>
        <a href="#">首页</a>
        <div></div>
    </li>
    <li>
        <a href="#">首页</a>
        <div></div>
    </li>
</ul>
<script type="text/javascript">
    var arr=document.getElementsByTagName("li");
    for(var i=0;i<arr.length;i++){
        arr[i].onmouseover=function(){
            this.style.overflow="visible";
        }
    }
    for(var i=0;i<arr.length;i++){
        arr[i].onmouseout=function(){
            this.style.overflow="hidden";
        }
    }
</script>
</body>
</html>